<template>
  <!-- 我的申请内容 -->
  <div>
    <el-tabs v-model="activeName" v-show="!show" @tab-click="handleClick">
      <el-tab-pane v-for="tab in tabList" :key="tab.name" :label="tab.label" :name="tab.name">
        <div style="display: flex; justify-content: flex-end">
          <el-select v-model="value" placeholder="请选择" @change="changeSelect">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-input placeholder="请输入内容" v-model="name" class="input-with-select" style="width: 300px" clearable>
            <el-button slot="append" icon="el-icon-search" @click="searchBtn"></el-button>
          </el-input>
        </div>

        <el-table :data="tableData" border style="width: 100%; margin-top: 10px">
          <el-table-column prop="resourceName" label="资源名称" width="200" align="center">
          </el-table-column>
          <el-table-column prop="resourceType" label="资源分类" width="120" align="center">
            <template slot-scope="scope">
              {{ scope.row.resourceType == 0 ? "数据资源" : "" }}
              {{ scope.row.resourceType == 1 ? "服务资源" : "" }}
            </template>
          </el-table-column>
          <el-table-column prop="resourceDept" label="资源提供方" width="120" align="center">
          </el-table-column>
          <el-table-column label="申请方式" width="120" align="center">
            <template slot-scope="scope">
              {{ scope.row.sqfs == 0 ? "数据库" : "" }}
              {{ scope.row.sqfs == 1 ? "API接口" : "" }}
              {{ scope.row.sqfs == 2 ? "文件" : "" }}
            </template>
          </el-table-column>
          <el-table-column prop="spzt" label="审批结果" width="120" align="center">
            <template slot-scope="scope">
              {{ scope.row.spzt === 0 ? "待审批" : "" }}
              {{ scope.row.spzt === 1 ? "通过" : "" }}
              {{ scope.row.spzt === 2 ? "驳回" : "" }}
            </template>
          </el-table-column>
          <el-table-column prop="syzt" label="使用状态" width="120" align="center">
            <template slot-scope="scope">
              {{ scope.row.syzt === 0 ? "使用中" : "" }}
              {{ scope.row.syzt === 1 ? "已停用" : "" }}
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="申请时间" align="center" width="200">
            <template slot-scope="scope">
              {{ scope.row.createTime | formatDate }}
            </template>
          </el-table-column>
          <el-table-column prop="updateTime" label="审批时间" width="120" align="center">
            <!-- <template slot-scope="scope" v-if="scope.row.updateTime !== null">
              {{ scope.row.updateTime | formatDate }}
            </template> -->
          </el-table-column>
          <!--          <el-table-column-->
          <!--            fixed="right"-->
          <!--            label="操作"-->
          <!--            width="170"-->
          <!--            align="center"-->
          <!--          >-->
          <!--            <template slot-scope="scope">-->
          <!--              <el-button-->
          <!--                type="text"-->
          <!--                size="small"-->
          <!--                @click="approvalDetails(scope.row.id)"-->
          <!--                >审批详情</el-button-->
          <!--              >-->
          <!--              <el-button type="text" size="small" @click="checkBtn(scope.row)"-->
          <!--                >查看</el-button-->
          <!--              >-->
          <!--              <el-popconfirm-->
          <!--                title="这是一段内容确定删除吗？"-->
          <!--                @confirm="handleDelete(scope.row)"-->
          <!--              >-->
          <!--                <el-button slot="reference" type="text" size="small">-->
          <!--                  删除</el-button-->
          <!--                >-->
          <!--              </el-popconfirm>-->
          <!--            </template>-->
          <!--          </el-table-column>-->
        </el-table>

        <el-dialog title="资源审批详情" :visible.sync="approvaldetailsDialog" :z-index="999">
          <el-descriptions :column="2">
            <el-descriptions-item label="资源名称">
              {{ detailsList.resourceName }}
            </el-descriptions-item>
            <el-descriptions-item label="资源分类">
              {{ detailsList.resourceType === 0 ? "数据资源" : "服务资源" }}
            </el-descriptions-item>
            <el-descriptions-item label="申请部门">
              {{ detailsList.applyInstitution }}
            </el-descriptions-item>
            <el-descriptions-item label="申请人">
              {{ detailsList.createUser }}
            </el-descriptions-item>
            <el-descriptions-item label="共享方式">
              {{
                detailsList.type === 0
                  ? "数据库"
                  : detailsList.type === 1
                    ? "文件"
                    : "API服务"
              }}
            </el-descriptions-item>
            <el-descriptions-item label="申请时间">
              {{ detailsList.createTime }}
            </el-descriptions-item>
            <el-descriptions-item label="申请描述">
              {{ detailsList.description }}
            </el-descriptions-item>
          </el-descriptions>
          <hr />
          <el-descriptions :column="1">
            <el-descriptions-item label="审批时间">
              {{ detailsList.updateTime }}
            </el-descriptions-item>
            <el-descriptions-item label="审批人">
              {{ detailsList.updateUser }}
            </el-descriptions-item>
            <el-descriptions-item label="审批结果">
              {{
                detailsList.auditStatus === 1
                  ? "审核通过"
                  : detailsList.auditStatus === 2
                    ? "审核不通过"
                    : "审核中"
              }}
            </el-descriptions-item>
            <el-descriptions-item label="审批意见">
              {{ detailsList.applyOpinion }}
            </el-descriptions-item>
          </el-descriptions>
        </el-dialog>

        <div style="display: flex; justify-content: flex-end">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="currentPage" :page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
            layout="prev, pager, next, sizes, jumper" :total="totalNum">
          </el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
    <!--    <div-->
    <!--      v-show="show"-->
    <!--      class="t4_r t4_r_sj phone_css"-->
    <!--      style="height: auto; min-height: 560px"-->
    <!--    >-->
    <!--      <div class="listToggle backBtn">-->
    <!--        <el-button size="small" type="primary" @click="show = false"-->
    <!--          >返回列表</el-button-->
    <!--        >-->
    <!--      </div>-->
    <!--      <dataInfo-->
    <!--        :updateCycleList="updateCycleList"-->
    <!--        :shareTypeList="shareTypeList"-->
    <!--        :ShareModeList="ShareModeList"-->
    <!--        :resTpye="['数据资源', '服务资源'][resourceType]"-->
    <!--        v-show="showDataInfo"-->
    <!--      ></dataInfo>-->
    <!--      <dataInfo1-->
    <!--        :updateCycleList="updateCycleList"-->
    <!--        :shareTypeList="shareTypeList"-->
    <!--        :ShareModeList="ShareModeList"-->
    <!--        v-show="showDataInfo1"-->
    <!--        :resTpye="['数据资源', '服务资源'][resourceType]"-->
    <!--      ></dataInfo1>-->
    <!--    </div>-->
  </div>
</template>
<script>
import {
  getApplyDataList,
  getApplyDataInfo,
  getUpdateCycle,
  getDelApply,
  getApplyApiList,

  getMyDataList,
} from "@/utils/httpUtils";
import dataInfo from "@/views/dataDirectory/dataInfo";
import dataInfo1 from "@/views/serviceDirectory/dataInfo";
export default {

  data() {
    return {
      showDataInfo: false,
      showDataInfo1: false,
      show: false,
      resTypeList: [
        {
          code: 0,
          name: "数据资源",
        },
        {
          code: 1,
          name: "服务资源",
        },
      ],
      tabList: [
        {
          label: "数据资源",
          name: "dataResource",
          content: "这是数据资源的内容。",
          type: 0,
        },
        {
          label: "服务资源",
          name: "serviceResource",
          content: "这是服务资源的内容。",
          type: 1,
        },
      ],
      value: "",
      options: [
        {
          value: "",
          label: "全部",
        },
        {
          value: "0",
          label: "待审批",
        },
        {
          value: "1",
          label: "通过",
        },
        {
          value: "2",
          label: "驳回",
        },
      ],
      name: "",
      tableData: [],
      activeName: "dataResource",
      currentPage: 1,
      pageNo: 1,
      pageSize: 10,
      status: "",
      totalNum: 0,
      approvaldetailsDialog: false,
      detailsList: {
        resourceName: "",
        resourceType: "",
        applyInstitution: "",
        createUser: "",
        type: "",
        updateTime: "",
        description: "",
        createTime: "",
        updateUser: "",
        auditStatus: "",
      },
      updateCycleList: [],
      shareTypeList: [],
      ShareModeList: [],
      resourceType: 0,
    };
  },
  mounted() {
    this.applicationResourceFn();
  },
  //   处理1703592547000 时间格式
  filters: {
    formatDate(timestamp) {
      const date = new Date(timestamp);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      const hours = String(date.getHours()).padStart(2, "0");
      const minutes = String(date.getMinutes()).padStart(2, "0");
      const seconds = String(date.getSeconds()).padStart(2, "0");

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
  },
  methods: {
    handleClick(tab, event) {
      // 数据资源
      if (tab.label == "数据资源") {
        this.resourceType = 0;
        this.applicationResourceFn();
      } else if (tab.label == "服务资源") {
        this.resourceType = 1;
        this.applicationResourceFn();
      }
    },
    handleDelete(row) {
      console.log(row, "点了-删除审批");
      getDelApply({
        id: row.id,
      }).then((res) => {
        console.log(res, "删除成功");
        if (res.code == "000000") {
          this.$message({
            message: "删除成功",
            type: "success",
          });
        }
      });
    },
    checkBtn(row) {
      console.log(row, "row");
      this.resourceType = row.resourceType;
      if (row.resourceType === 0) {
        this.showDataInfo = true;
        this.showDataInfo1 = false;
        this.$bus.$emit("busInfo", row.resourceCode);
        this.$bus.$emit("infoList1", this.tableData);
        this.show = true;
      } else if (row.resourceType === 1) {
        this.showDataInfo = false;
        this.showDataInfo1 = true;
        this.$bus.$emit("busInfo", row.resourceCode);
        this.show = true;
      }
    },
    approvalDetails(id) {
      this.approvaldetailsDialog = true;
      console.log(id);
      getApplyDataInfo({
        id: id,
      }).then((res) => {
        console.log(res.data, "审批详情");
        this.detailsList = {
          resourceName: res.data.resourceName,
          resourceType: res.data.resourceType,
          applyInstitution: res.data.applyInstitution,
          createUser: res.data.createUser,
          type: res.data.type,
          updateTime: res.data.updateTime,
          description: res.data.description,
          createTime: res.data.createTime,
          updateUser: res.data.updateUser,
          auditStatus: res.data.auditStatus,
        };
      });
    },
    searchBtn() {
      if (this.activeName === "dataResource") {
        this.applicationResourceFn(); // 调用数据资源的搜索方法
      } else if (this.activeName === "serviceResource") {
        // this.getApplyApiListFn(); // 调用服务资源的搜索方法
        this.applicationResourceFn()
      }
    },

    changeSelect(val) {
      console.log(val, "val");
      this.status = val;
      this.applicationResourceFn();
    },
    // 我的申请｜数据资源
    applicationResourceFn() {
      getMyDataList({
        requestType: 1,
        pageNum: this.pageNo,
        pageSize: this.pageSize,
        keyWord: this.name,
        resourceType: this.resourceType,
        spzt: this.status
      }).then((res) => {
        console.log(res, "我的申请，数据资源");
        this.tableData = res.content;
        this.tableData.forEach((item) => {
          if(!item.updateTime){
            item.updateTime = '暂未审批';
          }
        })
        // this.currentPage = res.totalElements;
        this.totalNum = res.totalElements;
        this.name = "";
      });
    },
    // 我的资源 ｜服务资源
    // getApplyApiListFn() {
    //   getApplyApiList({
    //     pageNo: this.pageNo,
    //     pageSize: this.pageSize,
    //     name: this.name,
    //     status: this.value,
    //   }).then((res) => {
    //     console.log(res, "服务资源");
    //     this.tableData = res.data.totalList;
    //     this.currentPage = res.data.currentPage;
    //     this.totalNum = res.data.totalPageNum;
    //     this.name = "";
    //   });
    // },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.applicationResourceFn();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNo = val;
      this.applicationResourceFn();
    },
  },
};
</script>
<style scoped>
.listToggle {
  padding: 13px 20px;
}

.listToggle.backBtn {
  border-bottom: 4px solid #198ef8;
}
</style>
